<template>
  <el-dialog :visible.sync="dialog" :title="isAdd ? '新增应用' : '编辑应用'" append-to-body width="770px">
    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="150px">
      <el-form-item label="应用标识" prop="clinetId">
        <el-input v-model="form.clientId" :disabled="!isAdd" style="width:530px" />
      </el-form-item>
      <el-form-item label="应用密钥" prop="clientSecretStr">
        <el-input v-model.number="form.clientSecretStr" type="password" auto-complete="off" placeholder="密钥" style="width:530px" />
      </el-form-item>

      <el-form-item label="scope" prop="scope">
        <el-input v-model="form.scope" style="width:530px" />
      </el-form-item>
      <el-form-item label="回调地址" prop="webServerRedirectUri">
        <el-input v-model="form.webServerRedirectUri" style="width:530px" />
      </el-form-item>
      <el-form-item label="授权模式" prop="authorizedGrantTypes">
        <el-input v-model="form.authorizedGrantTypes" style="width:530px" placeholder="默认authorization_code,password,refresh_token,client_credentials" />
      </el-form-item>
      <el-form-item label="token_time" prop="accessTokenValidity">
        <el-input v-model.number="form.accessTokenValidity" placeholder="默认18000" />
      </el-form-item>
      <el-form-item label="refreshtoken_time" prop="refreshTokenValidity">
        <el-input v-model.number="form.refreshTokenValidity" placeholder="默认18000" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio v-for="item in dictobj['clients_status']" :key="item.value" v-model="form.status" :label="item.value">{{ item.label }}</el-radio>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { add, edit, getCode } from '@/api/auth/clients'
export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    dictobj: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialog: false, loading: false, form: { id: null, clientId: '', clientSecretStr: '', status: '0', scope: '', webServerRedirectUri: '', authorizedGrantTypes: '',
        accessTokenValidity: '', refreshTokenValidity: '' },
      style: 'width: 184px',
      rules: {
        clientId: [
          { trigger: 'blur', validator: (rule, value, callback) => {
            if (this.isAdd) {
              if (!value) {
                callback(new Error('请填写应用标识'))
              } else {
                getCode(value).then(res => {
                  if (res.code === 200) {
                    callback()
                  } else { callback(new Error('clientId 已存在')) }
                })
              }
            } else { callback() }
          } }
        ],
        clientSecretStr: [
          { required: true, message: '请输入密钥', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    const explorer = navigator.userAgent
    if (explorer.indexOf('Chrome') >= 0) {
      this.style = 'width: 184px'
    } else {
      this.style = 'width: 172px'
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.isAdd) {
            this.doAdd()
          } else this.doEdit()
        } else {
          return false
        }
      })
    },
    doAdd() {
      add(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.msg)
      })
    },
    doEdit() {
      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.msg)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'] && this.$refs['form'].resetFields()
      this.form = { id: null, clientId: '', clientSecretStr: '', status: '0', scope: '', webServerRedirectUri: '', authorizedGrantTypes: '',
        accessTokenValidity: '', refreshTokenValidity: '' }
    }
  }
}
</script>

<style scoped>
</style>
